<template>
  <h1>轻量状态管理库 pinia</h1>
  <h2>Store: {{ counter }}</h2>
  <h2>状态 count: {{ count }}</h2>
  <h3>计算 getters: {{ double }}</h3>
  <h4>{{ user }}</h4>
  <button @click="counter.add">同步修改添加</button>
  <button @click="counter.addAsync">异步修改添加</button>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
// import useCounterStore from "./store/counter";
import useStore from "./store";

const { user, counter } = useStore();

// 使用 Store
// const counter = useCounterStore();
console.log(counter);

// ❌不能直接解构，会让数据失去响应式
// const { count, double } = counter;

// ✅使用storeToRefs辅助函数，可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter);
</script>